<template>
  <swiper class="swiper-container" :navigation="{
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }" :pagination="{ clickable: true }" :autoplay="{ autoplay: true }" loop>
    <swiper-slide class="swiper-slide" v-for="(item, i) in data.imgs" :key="i">
      <img :src="item" alt="" />
    </swiper-slide>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 左右箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <!-- <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
  </swiper>
</template>

<script setup>
import { reactive, ref, watch, onMounted, computed } from 'vue'
import iconFont from '@/components/IconFont/iconFont'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/effect-fade'// 渐显渐隐
import 'swiper/css/pagination'// 小圆点分页
import 'swiper/swiper-bundle.css'
// import { SwiperCore, Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper'

const data = reactive({
  imgs: ['https://img2.baidu.com/it/u=2969169350,1551254405&fm=253&fmt=auto&app=120&f=PNG?w=1280&h=800',
    'https://img2.baidu.com/it/u=617579813,2960860841&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1669827600&t=b940d0639a5e8f69cf32287987bc9f3e',
    'https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1669827600&t=89a8d0baca1f32b7c2d0c8fa3e12f033',
    'https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669827600&t=5c70064472a0fce764a0ec2e881b6493',
    'https://img0.baidu.com/it/u=1705694933,4002952892&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281'
  ]
})
const onSwiper = (swiper) => {
  console.log(swiper)
}
const onSlideChange = () => {
  console.log('slide change')
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  text-align: center;
  overflow: hidden;
  border-radius: 0.1rem;
  --swiper-theme-color: #ff6600;
  --swiper-pagination-color: #248cc0;
  --swiper-navigation-color: #248cc0;
  --swiper-navigation-size: 20px;
}

.swiper-slide img {
  height: 100%;
  width: 100%;
  vertical-align: middle;
  border: 0;
}
</style>
